<script setup>
import { UploadFilled, ArrowLeft } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref, reactive, toRaw } from 'vue'
// 当前选中tab
const activeName = ref('check')
// 表格loading状态
const loading = ref(true)
// 错误表数据绑定对象
const tableData = reactive([])
// 上传区显示控制
let showUpload = ref(true)
// 检查通过
let checkPass = ref(false)
// 上传组件实例，用于清除上传文件列表
const uploadRef = ref(null)
// 表格组件实例，用于动态调整高度
const tableRef = ref(null)
// 文件上传处理函数
const handleUpload = (fileInfo) => {
  // 清除上传文件列表，防止不可预知错误
  uploadRef.value.clearFiles()
  showUpload.value = false
  window.api
    .checkExcelFile(fileInfo.file.path)
    .then((res) => {
      if (res.code == 200) {
        if (res.data.length == 0) {
          checkPass.value = true

          ElMessage.success('分析结束！')
        } else {
          checkPass.value = false
          tableData.push(...res.data)
          loading.value = false
          ElMessage.success('分析结束！')
        }
      } else if (res.code == 400) ElMessage.error('数据分析出错！' + res.msg)
    })
    .catch((err) => {
      console.log(err)
      ElMessage.error('数据分析出错！' + err)
    })
}
const onBack = () => {
  showUpload.value = true
  tableData.length = 0
  loading.value = true
}
const onSave = () => {
  window.api.saveOutputFile(toRaw(tableData)).then((res) => {
    if (res.code == 200) ElMessage.success(res.msg)
    else ElMessage.error(res.msg)
  })
}
</script>

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="检查文件" name="check">
      <el-upload
        v-if="showUpload"
        ref="uploadRef"
        accept=".xls,.xlsx"
        drag
        :http-request="handleUpload"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">拖动文件到此处打开 或<em>点击打开文件</em></div>
      </el-upload>
      <el-page-header v-else :icon="ArrowLeft" title="返回" @back="onBack()">
        <template v-if="!checkPass" #content>
          <div class="flex items-center">
            <span class="text-large font-600 mr-3"> 检查文档存在问题 </span>
            <el-tag type="danger">未通过</el-tag>
          </div>
        </template>
        <template v-if="!checkPass" #extra>
          <div class="flex items-center">
            <el-button type="primary" class="ml-2" @click="onSave()">导出</el-button>
          </div>
        </template>
        <el-table
          v-if="!checkPass"
          ref="tableRef"
          v-loading="loading"
          element-loading-text="文件分析中..."
          :data="tableData"
          style="width: 100%"
          :height="'calc(100vh - 120px)'"
        >
          <el-table-column prop="fileName" label="所在EXCEL表名" width="180" />
          <el-table-column prop="sheetName" label="sheet名" width="180" />
          <el-table-column prop="tableType" label="校验数据表" width="180" />
          <el-table-column prop="checkPlace" label="校验位置" width="130" />
          <el-table-column prop="ruleId" label="规则编号" width="110" />
          <el-table-column prop="errorInfo" label="报错反馈" width="300" />
        </el-table>
        <el-result
          v-else
          icon="success"
          title="检查通过"
          sub-title="经过全文检查，受检文件通过当前格式规则检查！"
        >
          <template #extra>
            <el-button type="primary" @click="onBack()">返回</el-button>
          </template>
        </el-result>
      </el-page-header>
    </el-tab-pane>
  </el-tabs>
</template>

<style></style>
